<style>

    .assets-table-sm-item {
        background: #fff;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
        border-radius: 2px;
        border: 1px solid #e9ebf2;
        margin-bottom: 16px;
        margin-top: 16px;
    }

    .assets-table-sm-item .assets-table-sm-con {
        padding: 16px;
    }

    .assets-table-common .assets-num {
        font-size: 16px;
        font-weight: 500;
        color: #3f475a;
        line-height: 20px;
    }

    .assets-table-common .assets-valuation {
        font-size: 12px;
        font-weight: 400;
        color: #7b8293;
        line-height: 16px;
    }

    .assets-table-con-item .assets-table-con-title {
        font-size: 10px;
        font-weight: 500;
        color: #7b8293;
        line-height: 16px;
    }

    .assets-table-con-item .assets-table-con-flex {
        width: 50%;
    }

    .assets-table-sm-item .assets-table-sm-title div {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
    }

    .assets-table-con-item {
        display: -ms-flexbox;
        display: flex;
        /*margin-top: 16px;*/
    }

    .assets-render-allocation .assets-render-num {
        width: 64px;
        font-size: 16px;
        font-weight: 400;
        color: #3f475a;
        line-height: 20px;
    }

    .assets-table-sm-item .assets-table-sm-title {
        height: 48px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background-color: #f7f9fc;
        padding: 0 15px;
        border-bottom: 1px solid #e9ebf2;
    }

    .assets-table-sm-item .assets-table-sm-title div .assets-currency-name {
        font-size: 14px;
        font-weight: 500;
        color: #3f475a;
        margin-left: 8px;
    }

    .assets-table-sm-item .assets-table-sm-title div .assets-currency-full {
        font-size: 12px;
        color: #7b8293;
        margin-left: 4px;
    }

    .uc-table .t-row .cell:nth-child(1):before {
        content: '地址：';
    }

    .uc-table .t-row .cell:nth-child(2):before {
        content: '流动性代币：';
    }

    .uc-table .t-row .cell:nth-child(3):before {
        content: '持仓代币：';
    }

    .square_gia {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        padding: .2344rem 0;
        background: #ebf1fe !important;
    }

    .repo-item {
        width: 25%;
        text-align: center;
    }

    .repo-item h1 {
        margin: 0;
        color: white;
        font-weight: 400;
        font-size: 18px;
    }

    .repo-item .name {
        font-size: 10px;
        color: #c4c7d0;
    }
</style>

<template>
    <div id="app" v-loading="loading">
        <bread-crumb>数据推广</bread-crumb>

        <!--    <div class="uc-head" v-loading="loading">
                  <div class="repo-item">
                    <h1 class="starred-num">{{listOfFunds.offlpAmount | keepDecimalPlaces(1)}}</h1>
            <div class="name">直属lp</div>
          </div>
          <div class="repo-item">
            <h1 class="starred-num">{{ allOfFunds.offlpAmount | keepDecimalPlaces(1) }}</h1>
            <div class="name">所有lp</div>
          </div>
          <div class="repo-item" style=" border-left:1px solid #fff">
            <h1 class="starred-num">{{ listOfFunds.offholdingAmount | keepDecimalPlaces(1) }}</h1>
            <div class="name">直属持仓</div>
          </div>
          <div class="repo-item">
            <h1 class="starred-num">{{ allOfFunds.offholdingAmount | keepDecimalPlaces(1) }}</h1>
            <div class="name">所有持仓</div>
          </div>
        </div>-->

        <div class="assets-table-sm-item">
            <div class="assets-table-sm-title">
                <div class="assets-dialog-title">
                    <img src="../../../../public/images/icon_XG.png" width="24" height="24"> <span
                        class="assets-currency-name">{{ listOfFunds.usertotalAmount | keepDecimalPlaces(1) }}</span><span
                        class="assets-currency-full">(总)</span></div>
            </div>
            <div class="assets-table-sm-con">
                <div class="assets-table-con-item">
                    <div class="assets-table-con-flex">
                        <div class="assets-table-con-title">总流动性　：{{ (parseFloat(allOfFunds.offlpAmount)) | keepDecimalPlaces(2)}}</div>
                        <div class="assets-table-common">
                            <div class="assets-num"></div>
                            <div class="assets-valuation">直属流动性：{{ (parseFloat(listOfFunds.offlpAmount)) | keepDecimalPlaces(2)}}</div>
                            <div class="assets-valuation">非直属流动性：{{( parseFloat(allOfFunds.offlpAmount)-parseFloat(listOfFunds.offlpAmount)) | keepDecimalPlaces(1) }}</div>
                        </div>
                    </div>
                    <div class="assets-table-con-flex">
                        <div class="assets-table-con-title">总持仓　：{{ (parseFloat(allOfFunds.offholdingAmount)) | keepDecimalPlaces(2)}}</div>
                        <div class="assets-table-common">
                            <div class="assets-num"></div>
                            <div class="assets-valuation">直属持仓：{{ (parseFloat(listOfFunds.offholdingAmount)) | keepDecimalPlaces(2)}}</div>
                            <div class="assets-valuation">非直属持仓：{{ (parseFloat(allOfFunds.offholdingAmount) - parseFloat(listOfFunds.offholdingAmount)) | keepDecimalPlaces(1)}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="uc-body">
            <!--筛选与排序-->

            <div class="control">
                <div class="order flex flex-ai-c">
                    <el-button size="small" class="el-button el-button--small el-button--primary" id="elulmeta"
                               @click="viewDirectFunds('viewDirectFundsUs',true)">直属<i class="el-icon-arrow-up"></i>
                    </el-button>
                    <el-button size="small" id="elulmeta"
                               @click="viewDirectFunds('viewAllFundsUs',true)">所有<i class="el-icon-arrow-down"></i>
                    </el-button>
                </div>
            </div>

            <!--主要元素-->
            <div class="uc-table">
                <div class="t-row td" v-for="item in viewDirectFundsData" v-cloak="">
                    <div class="cell">{{ item.currentAddress | addressCut }}</div>
                    <div class="cell">{{ (parseFloat(item.flow) + parseFloat(item.mining)) | keepDecimalPlaces(4) }} XG
                    </div>
                    <div class="cell">{{ item.holding | keepDecimalPlaces(4) }} XG</div>
                </div>
            </div>

            <!--翻页-->
            <div class="pager">
                <el-pagination
                        background layout="prev, pager, next"
                        :total="viewDirectFundsParam.count"
                        :pager-count="5"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size.sync="viewDirectFundsParam.pageSizeLocal"
                        :current-page.sync="viewDirectFundsParam.pageIndex"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import {mixins} from '@/mixins/mixins'
    import breadCrumb from '../components/breadCrumb.vue'
    import {API_VIEWFUNDSUS, getJustWapTokenAndIssuanceTokenRate} from "../../../axios/api";

    const LOGIN_TIMERLIMIT = 2000 //登录状态实时检测间隔
    import {mapState, mapGetters} from 'vuex'

    // 加载数据
    export default {
        name: "spread",
        components: {breadCrumb},
        mixins: [mixins],
        data() {
            return {
                loading: false,
                viewDirectFundsData: [],     // 下线资金
                viewDirectFundsParam: {
                    "pageIndex": 1,          //分页参数
                    "pageSize": 10,          //分页参数
                    "act": 'viewDirectFundsUs',
                    "count": 0,
                    "accountAddress": "",
                },
                //justWap令牌和发行令牌配置
                justWapTokenAndIssuanceTokenConfiguration: {
                    poolAddress: '',
                    tokenAddress: '',
                    justWapTokenAndIssuanceTokenRate: 0,
                    userMingContract: ''
                },
                //资金数据
                listOfFunds: {},
                allOfFunds: {},
                justWapTokenAndIssuanceTokenRate: 0,
            }
        },
        computed: {
            ...mapState(['tornlinkToken', 'xg']),//映射普通数据
            ...mapGetters(['isLogin'])// 映射计算数据
        },
        // 加载完毕后执行
        mounted() {
            let that = this;
            let xgObj = this.xg;

            //赋值地址。获取比率
            this.justWapTokenAndIssuanceTokenConfiguration.poolAddress = xgObj.pairAddress;
            this.justWapTokenAndIssuanceTokenConfiguration.tokenAddress = xgObj.token;

            if (this.isLogin == false) {
                // Swal.fire({
                //     type: 'error',
                //     text: '请先登录钱包',
                // })
            }

            // this.viewDirectFundsParam.accountAddress = 'TP1xkrhd5mt7ys8ZnR4PZFqTf3SD6UtWZA';
            this.viewDirectFundsParam.accountAddress = localStorage.getItem('sender');
            // 获取justwap代币和发行代币之间的费率
            this.getJustWapTokenRate();
        },
        created() {
            let that = this;
        },
        methods: {
            // 获取justwap代币和发行代币之间的费率
            getJustWapTokenRate: function () {
                let that = this;
                let xgObj = this.xg;
                let param = that.justWapTokenAndIssuanceTokenConfiguration;
                param.act = 'justWapTokensAndIssuingTokenRatesOutputInterface';

                getJustWapTokenAndIssuanceTokenRate(param).then(result => {
                    let data = result.data;
                    that.justWapTokenAndIssuanceTokenConfiguration.tokenAndLpTokenRatio = data.tokenAndLpTokenRatio;
                    that.justWapTokenAndIssuanceTokenConfiguration.mingContract = data.mingContract;

                    //赋值地址。准备拉取数据
                    that.viewDirectFundsParam.addArray = xgObj.pairAddress + ',' + xgObj.token + ',' + data.mingContract;

                    console.log('初始化完成，有效XG合约：', data.mingContract, '比率：' + data.tokenAndLpTokenRatio, '准备拉取数据')

                    // 下线资金统计，采用直属和非直属合并
                    this.viewDirectFunds('viewDirectFundsUs', true);
                    // 这个用来读取总资金
                    this.viewDirectFunds('viewAllFundsUs', false);

                });
            },
            // 刷新所有的请求数据
            refreshAll: function () {
                if (this.viewDirectFundsParam.act == 'viewDirectFundsUs') {
                    this.viewDirectFunds('viewDirectFundsUs', true);
                }
                if (this.viewDirectFundsParam.act == 'viewAllFundsUs') {
                    this.viewDirectFunds('viewAllFundsUs', true);
                }
            },

            // 设置所有数据接口内容
            setAllData: function (key, val) {
                this.viewDirectFundsParam[key] = val;
            },
            // 直属下线资金统计
            viewDirectFunds: function (act, isupt) {
                if (act != 'viewDirectFundsUs' && act != 'viewAllFundsUs' || act == '') return;
                if ($($(".el-button:hover")).length > 0) ($($("#elulmeta")[0])).removeClass('el-button--primary');

                let that = this;
                if (this.viewDirectFundsParam.accountAddress == '') return;
                //不同的选项卡切换act，达到切换数据目的
                let param = JSON.parse(JSON.stringify(this.viewDirectFundsParam));
                param.act = act;
                console.log(act, isupt,param)

                API_VIEWFUNDSUS(param).then(result => {
                    that.loading = false;
                    let data = result;

                    if (data.resultFlag == false) {
                        that.viewDirectFundsData = [];
                        that.listOfFunds = '';
                        that.allOfFunds = {};
                        that.popUpMessage(data.resultMsg);
                        return;
                    }

                    if (act == 'viewDirectFundsUs') {
                        that.listOfFunds = data.listOfFunds;

                    }
                    if (act == 'viewAllFundsUs') {
                        console.log('更新顶部不更新列表', act, isupt, data.listOfFunds)
                        that.allOfFunds = data.listOfFunds;
                    }

                    if (isupt) {
                        that.viewDirectFundsParam.act = act;
                        that.viewDirectFundsData = data.data;
                        that.viewDirectFundsParam.count = result.count;
                    }
                });
            },
            popUpMessage(msg) {
                this.$message(msg);
            },
            loadMessage(msg) {
                this.loading = true
            },

            // 参数转换URL
            parameterConversionURL(str) {
                // 参数转换url形式
                let parse = JSON.parse(JSON.stringify(str));
                var params = Object.keys(str).map(function (key) {
                    return encodeURIComponent(key) + "=" + encodeURIComponent(parse[key])
                }).join("&");
                return params;
            },
            //改变每页数量
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            //跳转页码
            handleCurrentChange(val) {
                console.log('跳转页码');
                this.refreshAll();
            },
        },
        filters: {
            keepDecimalPlaces: function (amount, precision) {
                return parseFloat(amount).toFixed(precision);
            },
            addressCut: function (add) {
                //取中间的点开始，截取X位
                let sub = add.substr(add.length / 2, 8);
                return add.replace(sub, '....');
            }
        },
        watch: {}
    }


</script>

<style lang="less" scoped>

    /*公共变量*/
    @import '~@/assets/global.less';

    /*排序与筛选*/
    .control {
        display: flex;
        justify-content: space-between;

    }

    /*用户中心表格*/
    .uc-table {
        color: #7f8eab;
        margin-top: 0px;
    }

    .uc-table .th, .uc-table .td { /*统一设置*/
        font-size: 14px;
        padding: 10px;
        border-bottom: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .uc-table .th {
        font-size: 14px;
        font-weight: bold;
    }

    .uc-table .th .cell {
    }

    .uc-table .td {
    }

    .uc-table .td .cell {
    }

    .uc-table .t-row .cell {
    }

    .uc-table .t-row .cell:nth-child(1) {
        flex: 5
    }

    .uc-table .t-row .cell:nth-child(2) {
        flex: 2
    }

    .uc-table .t-row .cell:nth-child(3) {
        flex: 2
    }

    .uc-table .t-row .cell:nth-child(4) {
        flex: 1
    }

    /**********************适应************************/
    @media screen and (max-width: @MINSCREEN) {

        /*排序与筛选*/
        .control {
            display: block;

        .control {
        }

        .order {
            margin-top: 5px;
        }
    }

    .uc-table .th {
        display: none !important;
    }

    .uc-table .t-row {
        display: block;
        padding: 10px 0px;
    }

    .uc-table .t-row .cell {
        width: 100% !important;
        font-size: 14px;
    }
    }
</style>